<template>
  <div class="radio">
    <div class="cursor checkItem" @click="handleClick(item, index)" v-for="(item,index) in options" :key="index">
      <span class="icon" :style="`border: ${checked === item ? '4px': '2px'} solid ${checked === item ?  '#' + colorList[index] : '#dcdfe6'}`" ></span>
      <span>{{item}}</span>
    </div>
  </div>
</template>

<script>
export default {
  model: {
    prop: 'checked',
    event: 'click-change'
  },
  props: {
    checked: String,
    options: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      colorList: ['13ECE3', '08B8F2', '0A66F3', 'D68F3F']
    }
  },
  methods: {
    handleClick (val) {
      if (this.checked !== val) this.$emit('click-change', val)
    }
  }
}
</script>

<style lang='scss' scoped>
.radio {
  display: flex;
  align-items: center;
  .checkItem {
    display: flex;
    align-items: center;
    margin-right: 10px;
    .icon {
      box-sizing: border-box;
      display: inline-block;
      width: 14px;
      height: 14px;
      border: 2px solid #dcdfe6;
      border-radius: 50%;
      margin-right: 5px;
    }
  }
}
</style>
